<template>
	<div>
		<el-dialog :visible.sync="dialogVisible" :title="title" :close-on-click-modal="false" width="750px" @close="close">
			<div v-loading="dialogLoading">
				<div style="margin-bottom: 10px" v-if="showRemarks">注：仅支持导出已配置了手机号的员工推广码</div>
				<div class="choose-tips">
					请选择{{ shopType }}：
					<span class="app-text-color-primary">已选择 {{ checkedIds.length }} 家{{ shopType }}</span>
				</div>

				<div class="shop-tree-box">
					<el-input v-model="filterText" size="small" placeholder="输入名称搜索" style="margin-bottom: 10px" />
					<el-tree
						ref="tree"
						:data="treeData"
						:props="treeProps"
						:filter-node-method="filterNode"
						default-expand-all
						show-checkbox
						node-key="keyId"
						@check-change="handleTree"
					/>
				</div>
			</div>
			<div slot="footer">
				<el-button size="small" round @click="hide">取 消</el-button>
				<el-button :disabled="dialogLoading" size="small" round type="primary" @click="submit">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<!-- type="text/jsx" -->
<script>
import { mapGetters } from 'vuex';
import { getSuperShop, getSuperShopBirthday } from '@/api/shop';

export default {
	props: {
		title: {
			type: String,
			default: '合作商户列表'
		},
		hasHeadquarters: {
			type: Boolean,
			default: false
		},
		shopType: {
			type: String,
			default: '合作商户'
		}
	},
	data() {
		return {
			// 状态
			dialogVisible: false,
			dialogLoading: false,
			// 数据
			treeProps: {
				label: 'name'
			},
			filterText: '',
			treeData: [],
			originCheckedIds: [],
			checkedIds: [],
			showRemarks: false
		};
	},
	watch: {
		filterText(val) {
			this.$refs.tree.filter(val);
		}
	},
	methods: {
		open(checkedIds = [], mbDayId, shopTreeType, checkedIdsDisabled = false, showRemarks = false) {
			this.mbDayId = mbDayId;
			this.shopTreeType = shopTreeType;
			this.showRemarks = showRemarks;
			this.originCheckedIds = checkedIds;
			this.checkedIds = checkedIds;
			this.checkedIdsDisabled = checkedIdsDisabled;
			this.fetchData();
			this.show();
		},

		show() {
			this.dialogVisible = true;
		},

		hide() {
			this.dialogVisible = false;
		},

		close() {
			this.dialogLoading = false;
			this.originCheckedIds = [];
			this.checkedIds = [];
			this.shopList = [];
			this.updateTree();
		},

		loading(loading = true) {
			this.dialogLoading = loading;
		},

		/**
		 * 获取数据
		 */
		// 获取门店列表
		fetchData() {
			this.dialogLoading = true;
			this.getSuperShopFun();
			this.dialogLoading = false;
		},

		getSuperShopFun() {
			let data = { id: this.mbDayId };
			if (this.shopTreeType == 'openSuperShopTree') {
				getSuperShop(data)
					.then(res => {
						this.shopList = JSON.parse(JSON.stringify(res.data));
						this.updateTree();
					})
					.catch(err => {});
			} else if (this.shopTreeType == 'openSuperShopTreeBirthday') {
				getSuperShopBirthday(data)
					.then(res => {
						this.shopList = JSON.parse(JSON.stringify(res.data));
						this.updateTree();
					})
					.catch(err => {});
			}
		},

		updateTree() {
			const treeData = [
				{
					id: 'all',
					children: [],
					name: '全部'
				}
			];
			this.shopList.forEach(v => {
				v.keyId = v.joinBusinessId;
				v.name = v.joinBusinessName;
				if (this.checkedIdsDisabled && this.originCheckedIds.includes(v.id)) {
					v.disabled = true;
					v.name = v.name + '（已选）';
				}
			});
			treeData[0]['children'] = this.shopList;
			this.treeData = treeData;
			this.$nextTick(() => {
				this.$refs.tree.setCheckedKeys(this.checkedIds);
			});
		},

		// 选择tree
		handleTree() {
			this.checkedIds = this.$refs.tree.getCheckedKeys(true);
		},

		// 回调
		submit() {
			let checkedIds = this.$refs.tree.getCheckedKeys(true);
			if (this.checkedIdsDisabled) {
				checkedIds = checkedIds.filter(v => {
					return !this.originCheckedIds.includes(v);
				});
			}

			let shopNum = '';
			if (this.shopList.length == checkedIds.length) {
				shopNum = 'all';
			}
			let prams = { checkedIds, shopNum };
			this.$emit('emitSuperShopIds', prams);
		},

		/**
		 * 状态组
		 */
		// 查询改变
		filterNode(value, data) {
			if (!value) return true;
			return data.name.indexOf(value) !== -1;
		}
	}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
/* 选择提示 */
.choose-tips {
	margin-bottom: 10px;
}

.shop-tree-box {
	overflow: auto;
	max-height: 500px;
	margin-top: 10px;
}
</style>
